<script setup lang="ts">
import Subject from "./components/subject.vue";
import DataPanel from "./components/data-panel.vue";
import Category from "./components/category.vue";
import Detail from "./components/detail.vue";
import Search from "./components/search.vue";
import Product from "./components/product.vue";
import SubBanner from "./components/sub-banner.vue";
</script>

<template>
  <umrp-page bg-color="#f2f2f2" style="padding-bottom: 80px">
    <umrp-carousel>
      <umrp-carousel-item>
        <umrp-image :height="120"></umrp-image>
      </umrp-carousel-item>
    </umrp-carousel>
    <umrp-container padding="10px" bg-color="#C22514" :gap="10">
      <Search placeholder="篮球" />
      <Category />
      <Subject />
      <DataPanel />
      <SubBanner />
      <Product />
      <Detail />
    </umrp-container>
    <umrp-affix :offset-top="50">
      <umrp-container bg-color="#00000090" padding="10px" radius="4px 0 0 4px" v-route="'XiaolanlkClientComplaint'">
        <umrp-text color="#fff" :size="12">投诉</umrp-text>
      </umrp-container>
    </umrp-affix>
    <umrp-affix :offset-top="100">
      <umrp-container bg-color="#00000090" padding="10px" style="border-radius: 4px 0 0 4px">
        <umrp-text color="#fff" :size="12">联系<br />商家</umrp-text>
      </umrp-container>
    </umrp-affix>
    <umrp-affix :offset-top="170">
      <umrp-container bg-color="#00000090" padding="10px" style="border-radius: 4px 0 0 4px">
        <umrp-text color="#fff" :size="12">生成<br />海报</umrp-text>
      </umrp-container>
    </umrp-affix>
    <umrp-action-bar>
      <umrp-row>
        <umrp-col :span="6">
          <umrp-container height="100%" justify="center" align="center">
            <umrp-space :size="10">
              <umrp-space direction="vertical" align="center" v-link:MobileMe>
                <umrp-icon></umrp-icon>
                <umrp-text>我的</umrp-text>
              </umrp-space>
              <umrp-space direction="vertical" align="center">
                <umrp-icon></umrp-icon>
                <umrp-text>客服</umrp-text>
              </umrp-space>
            </umrp-space>
          </umrp-container>
        </umrp-col>
        <!-- <umrp-col :span="7">
                    <umrp-container v-link:MobilePurchase :height="50" bg-color="#FCAEAE" direction="vertical"
                        justify="center" align="center">
                        <umrp-text color="#fff" :size="12">单独购买</umrp-text>
                        <umrp-text-price color="#fff"></umrp-text-price>
                    </umrp-container>
                </umrp-col> -->
        <umrp-col :span="18">
          <umrp-container v-route="'XiaolanlkPurchase'" :height="50" bg-color="#FB605C" direction="vertical"
            justify="center" align="center">
            <umrp-text color="#fff" :size="16">我要开团</umrp-text>
            <!-- <umrp-text-price color="#fff"></umrp-text-price> -->
          </umrp-container>
        </umrp-col>
      </umrp-row>
      <umrp-container bg-color="#00000080" padding="6px" justify="center" align="center">
        <umrp-space :size="10"> <umrp-text color="#fff">小蓝来客，让流量裂变升到新的高度</umrp-text> <umrp-text
            color="red">我要增长</umrp-text> </umrp-space>
      </umrp-container>
    </umrp-action-bar>
  </umrp-page>
</template>
